<template>
  <div class="assembleBox">
    <!-- 左侧轮播显示区域 -->
    <div v-if=" list[leftIndex].showTitle==='yes'" style="font-size: 18px;">拼团</div>
    <div class="asbBox">
      <div v-if="!list[leftIndex].assembleInfo[0]" class="asb_imgBg"></div>
      <div v-if="list[leftIndex].assembleInfo[0]" class="asb_img">
        <img :src="list[leftIndex].assembleInfo[0].url">
      </div>
      <div v-if="list[leftIndex].tag" class="asb_tag">{{ list[leftIndex].tag }}</div>
      <div class="asb_foot">
        <div v-if="!list[leftIndex].assembleInfo[0]" class="asb_foot_name">活动名称</div>
        <div
          v-if="list[leftIndex].assembleInfo[0]"
          class="asb_foot_name"
        >{{ list[leftIndex].assembleInfo[0].name }}</div>
        <div class="asb_foot_bottom clearfix">
          <!-- <div class="asb_bottom_tag">拼团享</div> -->
          <div v-if="!list[leftIndex].assembleInfo[0]" class="asb_bottom_left">￥00.00</div>
          <div
            v-if="list[leftIndex].assembleInfo[0]"
            class="asb_bottom_left"
          >￥{{ list[leftIndex].assembleInfo[0].lowestPrice }}</div>
          <div
            v-if="list[leftIndex].assembleInfo[0]"
            class="asb_bottom_middle"
          >原价 ￥{{ list[leftIndex].assembleInfo[0].price }}</div>
          <div
            v-if="list[leftIndex].assembleInfo[0]"
            :class="list[leftIndex].assembleInfo[0].status==='去拼团'? 'start': ''"
            class="asb_bottom_right"
          >
            <a href="javascript:;">{{ list[leftIndex].assembleInfo[0].status }}</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧轮播编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightassemble">
        <!-- 头部提示区域 -->
        <header class="title">拼团设置</header>
        <div class="editCon">
          <div style="margin-top:10px;">
            <span style="width:95px;text-align:right;display: inline-block;">标题栏：</span>
            <el-radio-group v-model="list[leftIndex].showTitle">
              <el-radio label="yes">显示</el-radio>
              <el-radio label="no">不显示</el-radio>
            </el-radio-group>
          </div>
          <div style="margin-top:20px">
            <span style="width:95px;text-align:right;display: inline-block;">活动：</span>
            <el-button
              v-if="!list[leftIndex].assembleInfo[0]"
              type="mini"
              @click="assembleDialogVisible=true"
            >选择活动</el-button>
            <el-tag
              v-if="list[leftIndex].assembleInfo[0]"
              closable
              disable-transitions
              @close="handleTagClose"
            >{{ list[leftIndex].assembleInfo[0].name }}</el-tag>
          </div>
          <div style="margin-top:20px">
            <span style="width:95px;text-align:right;display: inline-block;">活动标签：</span>
            <el-input
              v-model="list[leftIndex].tag"
              size="mini"
              placeholder="请输入活动名称"
              style="width:200px;"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播链接选择课程弹框 -->
    <el-dialog :visible.sync="assembleDialogVisible" title="选择课程" width="50%">
      <div>
        <span style="width:100px;">选择班级：</span>
        <el-autocomplete
          v-model="keyWord"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          style="width:300px;"
          @select="handleSelect"
        />
        <el-button type="primary" style="float:right">创建课程</el-button>
      </div>
      <el-table :data="list[leftIndex].assembleInfo" stripe border style="width: 100%;margin-top:20px;">
        <el-table-column prop="name" label="活动名称"/>
        <el-table-column prop="price" label="商品原价"/>
        <el-table-column prop="lowestPrice" label="秒杀价"/>
        <el-table-column prop="assembleNumber" label="商品个数"/>
        <el-table-column prop="startTime" label="创建时间"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="removeLink(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assembleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="courseConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['list', 'leftIndex'],
  data() {
    return {
      fileList: [],
      keyWord: '',
      assembleDialogVisible: false,
      classDialogVisible: false,
      assembleTableData: []
    }
  },

  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      return [
        { 'value': '拼团开始数据', 'price': '50', 'lowestPrice': '19', 'assembleNumber': '10', 'startTime': '2019-03-30', 'status': '去拼团', 'url': '/src/assets/subjectImg.png' },
        { 'value': '拼团未开始数据', 'price': '68', 'lowestPrice': '23', 'assembleNumber': '8', 'startTime': '2019-03-30', 'status': '拼团未开始', 'url': '/src/assets/subjectImg.png' }
      ]
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      if (this.list[this.leftIndex].assembleInfo.length > 0) {
        this.$message({
          message: '只能添加一个链接',
          type: 'warning'
        })
        return
      }
      this.list[this.leftIndex].assembleInfo.push({
        name: item.value,
        price: item.price,
        lowestPrice: item.lowestPrice,
        assembleNumber: item.assembleNumber,
        startTime: item.startTime,
        status: item.status,
        url: item.url
      })
      console.log(this.list[this.leftIndex].assembleInfo[0])
    },
    // 链接标签删除
    handleTagClose() {
      this.list[this.leftIndex].assembleInfo = []
    },
    // 移除链接列表
    removeLink(index) {
      this.list[this.leftIndex].assembleInfo.splice(index, 1)
    },
    // 选择课程确认
    courseConfirm() {
      if (this.list[this.leftIndex].assembleInfo.length === 0) {
        this.assembleDialogVisible = false
        return
      }
      this.assembleDialogVisible = false
      this.keyWord = ''
    }
  }
}
</script>
<style lang="scss" >
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.asbBox {
  border: 1px solid #f5f5f5;
  margin-top: 10px;
  position: relative;

  .asb_imgBg {
    width: 100%;
    height: 188px;
    background: #e1e1e1;
  }
  .asb_img {
    width: 100%;
    height: 188px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .asb_tag {
    top: 10px;
    left: -5px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 24px;
    position: absolute;
    background: #ff5353;
    color: #fff;
  }
  .asb_tag::after {
    content: '';
    position: absolute;
    border-left: 12px solid #ff5353;
    border-right: 6px solid transparent;
    border-top: 12px solid #ff5353;
    border-bottom: 12px solid #ff5353;
  }
  .asb_foot {
    padding: 10px;
    .asb_foot_name {
      font-size: 14px;
      font-weight: 500;
    }
    .asb_foot_bottom {
      margin-top: 10px;
      line-height: 26px;
      .asb_bottom_tag {
        position: relative;
        float: left;
        top: 2px;
        padding: 4px;
        margin-right: 5px;
        line-height: 1;
        background-color: #fff0ef;
        border-radius: 2px;
        font-size: 10px;
        color: #ff5353;
      }
      .asb_bottom_left {
        float: left;
        color: #ff5353;
        font-weight: 700;
      }
      .asb_bottom_middle {
        float: left;
        font-size: 14px;
        margin-left: 10px;
        text-decoration: line-through;
      }
      .asb_bottom_right {
        color: #fff;
        float: right;
        padding: 2px 20px;
        font-size: 12px;
        border-radius: 21px;
        background: #e1e1e1;
        margin-top: -5px;
      }
      .asb_bottom_right.start {
        background: #ff9800;
      }
    }
  }
}
.assembleBox {
  margin: 10px 0;
  padding: 0 10px;
  .image-mask {
    font-weight: 600;
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    font-size: 26px;
    color: #919191;
    text-align: center;
    line-height: 194px;
  }
}
.editRightassemble {
  width: 400px;
  position: absolute;
  left: 105%;
  top: 0;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;
  .title {
    font-size: 14px;
    padding-bottom: 15px;
    margin: 5px 0;
    border-bottom: 1px solid #e1e1e1;
    .help-text {
      font-size: 12px;
      color: #616161;
      margin-top: 5px;
    }
  }
  .editCon {
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #e1e1e1;
  }
}
</style>
